<template>
  <VGroup>
    <el-select v-model="info.primary_cause_id" v-bind="options" placeholder="一级退款原因" @change="handleChangeFirst">
      <el-option v-for="item in firstOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="info.secondary_cause_id" v-bind="options" placeholder="二级退款原因">
      <el-option v-for="item in optionsData.secondary" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </VGroup>
</template>
<script setup>
import { getReasonOptions } from '@/views/user/refund/api/index'
import { apiGetPlatform } from '@/api/public'
import { getReasonList } from '../../api/index'
const props = defineProps({
  firstOption: { type: Array, default: () => ([]) },
  info: { type: Object, default: () => ({}) },
})
const optionsData = reactive({
  first: [],
  secondary: [],
})

const options = {
  filterable: true,
  clearable: true,
  style: { width: '180px' },
}
onMounted(async () => {

})
const handleChangeFirst = e => {
  props.info.secondary_cause_id = ''
  if (e) {
    getSecondaryOptions(e)
  }
}

// 获取二级退款原因 
const getSecondaryOptions = async id => {
  try {
    const { data } = await getReasonOptions({ parent_id: id })
    // console.log(data);
    optionsData.secondary = data?.filter(v=> v.is_enable == 1)?.map(n => ({ label: n.reason, value: n.id }))
  } catch (e) {
    props.info.secondary_cause_id = ''
    optionsData.secondary = []
  }
}
defineExpose({
  getSecondaryOptions
})

</script>
